<template>


  <div class="common-layout" :style="{height:'100%'}">
      <el-container>
          <el-header>
              <div class="title">
                  <h2>部门员工管理</h2>
                  <el-breadcrumb separator="/">
              </el-breadcrumb>
           </div>
          </el-header>
          <el-main>
            <el-row :gutter="10">
              <el-col :span="3" :offset="0">
                <el-cascader 
                  v-model="state.departmentId"
                  :options="state.options"
                  clearable />
              </el-col>
              <el-col :span="2.3" :offset="0"><el-button @click="toGetDepartmentUserList" type="primary" icon='search'>查询</el-button></el-col>
              <el-col :span="2" :offset="0"><el-button @click="refreshData" plain icon='refresh'>重置</el-button></el-col>
            </el-row>
              <el-table 
              :data="state.tableData.slice((state.currentPage - 1) * state.pageSize, state.currentPage * state.pageSize)"
              height="700" 
              max-height="100%"
              v-model="state.itemData"
              style="width: 100%">
                  <el-table-column type="index" width="50" />
                  <el-table-column prop="avatar" label="" width="100">
                    <template v-slot="{ row }">
                      <el-avatar :src="serverUrl + '\\' +row.avatar" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" width="250" />
                  <el-table-column prop="account" label="账号" width="250" />
                  <el-table-column prop="role" label="权限" width="350" :formatter="formatRole"/>
                  <el-table-column prop="createdAt" label="创建日期" width="350" />
                  <el-table-column fixed="right" min-width="200">
                  <template #header>
                      <el-input v-model="search" size="small" placeholder="Type to search" />
                  </template>
                  <template #default="scope">
                      <el-button text size="small" @click="handleClick('detail',scope.$index, scope.row)"
                      >查看</el-button
                      >
                      <el-button
                      size="small"
                      type="primary"
                      @click="handleClick('edit',scope.$index, scope.row)"
                      >编辑</el-button
                      >
                      <el-button
                      size="small"
                      type="info"
                      disabled
                      @click="handleClick('edit',scope.$index, scope.row)"
                      >禁用此账号</el-button
                      >

                  </template>
                  </el-table-column>
              </el-table>

              <el-pagination
              v-model:current-page="state.currentPage"
              v-model:page-size="state.pageSize"
              :page-sizes="[5,10 , 30, 50]"
  
              layout="total, sizes, prev, pager, next, jumper"
              :total="state.tableData.length"
           
              @current-change="handleCurrentChange"
              />
          </el-main>

          <div>
  <UserEditInfoDialog
       v-if="dialogFromVisible"
       :visible="dialogFromVisible"
       :type="dialogType"
       :data="state.detailRowData"
       @toggle="toggleVisible"
       @refresh="refreshData"
       >
  </UserEditInfoDialog>

 </div>

      </el-container>
  </div>


</template>

<script setup>

import { reactive,ref,watch,onMounted } from 'vue'
import requestMethods from '../../../api/api';
import UserEditInfoDialog from '../../../components/dialog/UserEditInfoDialog.vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { useRouter } from "vue-router";

const router = useRouter()

const dialogType = ref('');
const serverUrl = process.env.VUE_APP_AVATAR_API
const dialogFromVisible = ref(false)
const state = reactive({
currentPage: 1,
pageSize: 10,
small: false,
detailRowData:{},
departmentId:{},
background: false,
disabled: false,
tableData :[  
{
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}, {
  date: '2016-05-03',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
},
{
  date: '2016-05-02',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Office',
},
{
  date: '2016-05-04',
  name: 'Tom',
  state: 'California',
  city: 'Los Angeles',
  address: 'No. 189, Grove St, Los Angeles',
  zip: 'CA 90036',
  tag: 'Home',
}
]
})

watch(() => dialogFromVisible, (newV, oldV) => {
console.log(newV, oldV)
})


onMounted(()=>{
requestMethods.getAllUsers().then(res=>{
  state.tableData = res.data
}).catch(err=>{
  console.log(err.response);
  ElMessageBox.alert('当前账号操作用户权限不足', err.response.data.message, {
  confirmButtonText: '我知道了',
  callback: () => {
    router.push("/todo/all");
    ElMessage({
      type: 'info',
      message: '跳转回主页'
    })
  },
})
})
requestMethods.getAllDepartments().then(
      res => {
          state.options = formatData(res.data);
       
      }
  ).catch(error => console.log(error))
})

const handleClick = (type,index,row) => {
  dialogFromVisible.value = true
  dialogType.value = type
  state.detailRowData = row
  console.log(index,state.detailRowData);
}

const toGetDepartmentUserList = () =>{
  console.log(state.departmentId);
  requestMethods.getDepartmentUsers({id1:state.departmentId[0],id2:state.departmentId[1]})
  .then(res=>{
    state.tableData = res.data.departmentUsers
  }).catch(error=>{
    console.log(error)
  })
}
const formatData = (data) => {
  return data.map((item) => {
  const newItem = {
    value: item._id,
    label: item.name,
  };
  if (item.children && item.children.length > 0) {
    newItem.children = formatData(item.children);
  }
  return newItem;
});
}

const toggleVisible = (value) =>{
  dialogFromVisible.value = value.toggle
 
}
const formatRole = (row) => {
    // 将 admin 转换为系统管理员，将 user 转换为普通用户
    return row.role === 'admin' ? '系统管理员' : '普通用户';
  }
const refreshData = () => {
  
    requestMethods.getAllUsers().then(res=>{
    state.tableData = res.data
  }).catch(err=>{
    console.log(err.response);
    ElMessageBox.alert('当前账号操作用户权限不足', err.response.data.message, {
    confirmButtonText: '我知道了',
    callback: () => {
      router.push("/todo/all");
      ElMessage({
        type: 'info',
        message: '跳转回主页'
      })
    },
  })
  })
  
}

const handleCurrentChange = (val) => {
  state.currentPage = val
  console.log(val);
}

</script>

<style scoped lang="less">
.el-container {

  --el-header-height:auto;
  
  .el-header {

    
      
   

      .title{

          display: flex;
          justify-content: flex-start;
     
          align-items: center;

          h2{
       
              border: 0;
             
              line-height: 40px;
          }
          .el-breadcrumb{
          padding-left: 20px;
          
      }
      }
     
  }

  .el-main {
      margin: 0;
      margin-top: 20px;
      height: 80vh;
      background-color: #ffff;
      border-radius: 25px 0px 0 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .el-pagination{
          padding-top: 20px;
      }
  }
}
</style>